// 商品列表模板
// import { Col } from 'element-ui'
import draggable from 'vuedraggable'
// import GoodsImgMaterial from '@/components/goodsMaterial/img'

// 引入当前页面的scss
// import SCSS from './index.scss'
import { saveMicroPage, getPageSuspendedNavigation } from '@/api/shoppingMall/feature'


export default {
  name: 'GoodsTabs',
  components: {
    draggable,
    chooseFeature: () => import('@/components/choose-feature/index.vue'),
    GoodsImgMaterial: () => import('@/components/goodsMaterial/img'),
    iconFont:()=>import('@/components/icon-font')
  },
  data() {
    return {
      currentChooseModel: 1,
      maxTabNum: 5,// 最多一级导航数量
      maxChildTabNum: 4,// 最多二级导航数量
      inconIndex:null,
      dialogChoosePages: false,
      isGetChooseFeature: false,
      isNavigationShow: true, // 浮窗导航栏显隐
      applicationPageOptions: [
        {pageName: '首页页面', value: 'index'},
        {pageName: '商品详情页', value: 'productDetails'},
        {pageName: '购物车', value: 'shoppingCart'},
        {pageName: '个人中心', value: 'personalCenter'},
        {pageName: '二级页面', value: 'secondaryPages'},
      ],
      checkAll: false,
      isIndeterminate: true,
      iconOptions: ['el-icon-circle-plus-outline', 'el-icon-circle-plus'],
      // 子导航
      suspendConfig: [], // 选择要展示的子导航数据
      isSaving: false, // 是否正在保存
      id: '',
      dataField: {
        category: 70, // 页面标识
        // styleType: '1',
        // showType: 0,
        // cartType: '1',
        title: '悬浮导航设计', // 标题
        description: '', // 描述
        location: 1, // 导航位置标识数据 1：右下 2：右上 3： 左上 4： 左下
        pageShow: [], // 应用页面
        mainIconData: 'el-icon-coordinate', //默认的主导航图标
        mainCurrentIndex: 0, // 主导航图标对应的下标
        subnavigationOptions: [ // 子导航数据
          {
            name: '购物车',
            checked: true,
            // icons:['el-icon-shopping-cart-1', 'el-icon-shopping-cart-full','el-icon-shopping-cart-2'],
            chooseIcon: 'el-icon-shopping-cart-1',
            chooseIconIndex: 0,
            path: '',
          },
          {
            name: '小爱助手',
            checked: false,
            // icons:['el-icon-coordinate'],
            chooseIcon: 'el-icon-coordinate',
            chooseIconIndex: 0,
            path: '',
          },
          {
            name: '个人中心',
            checked: true,
            // icons:['el-icon-s-custom', 'el-icon-s-check','el-icon-user-solid'],
            chooseIcon: 'el-icon-s-custom',
            chooseIconIndex: 0,
            path: '',
          },
        ],
      },
      isDialogIcon: false,
      isMainDialogIcon: false,
      currentItemData: null, // 当前子项，用于选择该子项的图标
      iconHref:'',
      iconMainHref:''
    }
  },
  watch: {
    // 设置-导航位置
    'dataField.location'(value) {
      if (value == 1) { // 位置：右下
        // document.getElementById('navbarId').style.setProperty('--suspensionBoxBottom', '46px')
        // document.getElementById('navbarId').style.setProperty('--suspensionBoxRight', '46px')
        this.$refs.navbarId.style.setProperty('--suspensionBoxBottom', '8%')
        this.$refs.navbarId.style.setProperty('--suspensionBoxRight', '13%')
        // 导航图标展开方向朝上
        this.$refs.navbarId.style.setProperty('--opMenuTop', this.suspendConfig.length * -42 + 'px')

      } else if (value == 2) { // 位置：右上
        this.$refs.navbarId.style.setProperty('--suspensionBoxBottom', '80%')
        this.$refs.navbarId.style.setProperty('--suspensionBoxRight', '13%')
        // 导航图标展开方向朝下
        this.$refs.navbarId.style.setProperty('--opMenuTop', this.suspendConfig.length * 16 + 'px')
      } else if (value == 3) { // 位置：左上
        this.$refs.navbarId.style.setProperty('--suspensionBoxBottom', '80%')
        this.$refs.navbarId.style.setProperty('--suspensionBoxRight', '80%')
        // 导航图标展开方向朝下
        this.$refs.navbarId.style.setProperty('--opMenuTop', this.suspendConfig.length * 24 + 'px')
      } else if (value == 4) { // 位置：左下
        this.$refs.navbarId.style.setProperty('--suspensionBoxBottom', '8%')
        this.$refs.navbarId.style.setProperty('--suspensionBoxRight', '80%')
        // 导航图标展开方向朝上
        this.$refs.navbarId.style.setProperty('--opMenuTop', this.suspendConfig.length * -42 + 'px')
      }
    }
  },
  mounted() {
    this.getInfo()

  },
  methods: {
    // 链接
    linkClick(item,index){
      this.inconIndex = index
      this.dialogChoosePages = true
    },
    chooseChooseFeaturesFun($event) {
      this.dataField.subnavigationOptions[this.inconIndex].path = $event.data.path

      this.dialogChoosePages = false
    },
    // 请求配置数据
    getInfo(){
      getPageSuspendedNavigation({ id: 70 }).then(res => {
        if(res !== null){
          this.id = res.id
          this.dataField = res.moduleList[0].dataField
          this.filterNavigation()
        }

      })
    },

    // 保存
    save(){
      this.isSaving = true
      const moduleList = {
        id: this.id,
        operType: 2,
        moduleList: [{
            type: "config",
            dataField: this.dataField
        }]
      }
      saveMicroPage(moduleList).then(res => {
        this.isSaving = false
        this.$message.success('发布成功')
        this.getInfo()
      })
    },

    // 点击悬浮按钮
    isNavigation() {
      this.isNavigationShow = !this.isNavigationShow
    },

    // 页面应用-全选
    handleCheckAllChange(val) {
      if(val) {
        this.applicationPageOptions.map( item => {
          this.dataField.pageShow.push(item.value)
        })
      } else {
        this.dataField.pageShow = []
      }
      this.isIndeterminate = false;
    },

    // 页面应用-选择
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.applicationPageOptions.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.applicationPageOptions.length;
    },

    // 主导航-选择图标
    // selectIcon(item,index) {
    //   this.dataField.mainCurrentIndex = index;
    //   this.dataField.mainIconData = item
    //   // console.log('选择图标===>', item)
    // },
    selectMainIcon() {
      this.isMainDialogIcon = true
    },
    // 子导航
    // 勾选子导航
    handleCheckedSubnavigation(item) {
      this.filterNavigation()
    },

    // 打开图标选择窗
    selectSubnavigationIcon(item, eleIndex) {
      this.currentItemData = item
      this.isDialogIcon = true
    },

    // 添加子导航
    handleAddChildTab() {
      let subnavigationTemplate = {
        name: '',
        checked: false,
        chooseIcon: '#icon-shouye1',
        path: ''
      }
      this.dataField.subnavigationOptions.push(subnavigationTemplate)
    },

    // 删除子导航
    deleteSubnavigation(index) {
      this.dataField.subnavigationOptions.splice(index,1)
      this.filterNavigation()
    },

    // 选择的图标数据
    iconMainBox(val){
      this.iconMainHref = val
    },
    // 选择的图标数据
    iconBox(val){
      this.iconHref = val
    },
    // 确定主图标
    iconMainChooseModel(){
      this.dataField.mainIconData = this.iconMainHref
      this.isMainDialogIcon = false
    },

    // 确定图标
    iconChooseModel(){
      this.currentItemData.chooseIcon = this.iconHref
      this.filterNavigation()
      this.isDialogIcon = false
    },

    // 处理子导航项的方法,遍历全部的子导航，过滤出所有选中的子导航项进行左侧同步展示
    filterNavigation() {
      this.suspendConfig = []
      this.dataField.subnavigationOptions.map( item => {
        if(item.checked) {
          this.suspendConfig.push(item)
        }
      })
      this.$refs.navbarId.style.setProperty('--opMenuTop', this.suspendConfig.length * -42 + 'px')
    }
  }
}
